<template>
	<view class="corridor-container">
		<!-- 背景图层 -->
		<view class="corridor-background" :style="{backgroundImage:`url(${bgImages.corridor})`}"></view>
		
		<!-- 导航区域 -->
		<view class="navigation-area">
			<!-- 左侧：返回护士站 -->
			<view class="nav-button left-nav" @click="goToNursesStation">
				<!-- <image class="direction-icon" src="https://i.postimg.cc/mZpXk7pv/image-png.png" mode="aspectFit"></image> -->
				<text>护士站</text>
			</view>
			
			<!-- 左中侧：被服室 -->
			<view class="nav-button left-mid-nav" @click="showLinenRoomPopup">
				<!-- <image class="direction-icon" src="https://i.postimg.cc/mZpXk7pv/image-png.png" mode="aspectFit"></image> -->
				<text>被服室</text>
			</view>
			
			<!-- 中间：病房 -->
			<view class="nav-button mid-nav" @click="goToWard">
				<!-- <image class="direction-icon" src="https://i.postimg.cc/mZpXk7pv/image-png.png" mode="aspectFit"></image> -->
				<text>病房</text>
			</view>
			
			<!-- 右侧：前往治疗室 -->
			<view class="nav-button right-nav" @click="goToTreatmentRoom">
				<text>治疗室</text>
				<!-- <image class="direction-icon" src="https://i.postimg.cc/cJtr1RQZ/image-png-1.png" mode="aspectFit"></image> -->
			</view>
		</view>
		
		
		<!-- 被服室弹窗 -->
		<view v-if="showLinenPopup" class="linen-popup-mask">
			<view class="linen-blur-bg"></view>
			<view class="linen-popup-content">
				<image
					class="linen-popup-img"
					src="https://i.postimg.cc/kGv5Jjkj/76c49805ba49a055978f79dbbc779f3.png"
					mode="aspectFill"
					@click="onLinenImageClick"
				/>
			</view>
		</view>

		<!-- 自定义提示弹窗 -->
		<view v-if="showLinenTip" class="linen-tip-mask">
			<view class="linen-tip-content">
				<uni-icons type="checkmarkempty" size="48" color="#2A82E4" class="linen-tip-check" />
				<text>已准备好病号服、被罩、枕头</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
import { bgImages, uiImages } from '@/src/dataResource.js';
// 被服室弹窗控制
const showLinenPopup = ref(false);
// 新增：自定义提示弹窗控制
const showLinenTip = ref(false);

// 显示被服室弹窗
const showLinenRoomPopup = () => {
	console.log(11);
    showLinenPopup.value = true;
};

// 关闭被服室弹窗
const closeLinenPopup = () => {
    showLinenPopup.value = false;
};

// 新增：点击被服室图片的处理
const onLinenImageClick = () => {
    closeLinenPopup();
    showLinenTip.value = true;
    setTimeout(() => {
        showLinenTip.value = false;
    }, 2000);
};

// 页面跳转函数
const goToNursesStation = () => {
    uni.navigateTo({
        url: '/pages/nursesStation/nursesStation',
        animationType: 'slide-in-left'
    });
}

const goToWard = () => {
    uni.navigateTo({
        url: '/pages/ward/ward',
        animationType: 'slide-in-left'
    });
}

const goToTreatmentRoom = () => {
    uni.navigateTo({
        url: '/pages/treatmentRoom/treatmentRoom',
        animationType: 'slide-in-right'
    });
}

// 页面加载动画
onMounted(() => {
    console.log('走廊页面已加载');
});
</script>

<style lang="scss" scoped>
.corridor-container {
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	
	// 走廊背景
	.corridor-background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		// background-image: url('https://i.postimg.cc/Gpg5NcwL/image-png-2.png');
		background-size: cover;
		background-position: center;
		z-index: 1;
	}
	
	// 导航区域
	.navigation-area {
		position: absolute;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 80%;
		display: flex;
		justify-content: space-evenly; // 让按钮平均分布
		z-index: 10;
		.nav-button {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: rgba(42, 130, 228, 0.8);
			padding: 10rpx 30rpx;
			border-radius: 50rpx;
			flex: 1; // 每个按钮平分宽度
			margin: 0 10rpx; // 按钮之间留点间距
			text-align: center;
			text {
				color: #fff;
				font-size: 16rpx;
				font-weight: bold;
			}
			&:active {
				transform: scale(0.95);
				background-color: rgba(42, 130, 228, 1);
			}
		}
		// 移除 .left-nav 和 .right-nav 的 margin
	}
	
	
	
}

// 新增：修复弹窗层级和显示问题
.linen-popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
// 新增模糊背景层
.linen-blur-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url('https://i.postimg.cc/Gpg5NcwL/image-png-2.png');
  background-position: center;
  background-size: cover;
  filter: blur(16px);
  z-index: 0;
}
.linen-popup-content {
  position: relative;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.15);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.linen-popup-img {
  width: 400rpx;
  height: 400rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.10);
}

.linen-tip-mask {
	position: fixed;
	top: 0; left: 0; width: 100vw; height: 100vh;
	background: rgba(0,0,0,0.15);
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20rpx;
}
.linen-tip-content {
	background: linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%);
	color: #2A82E4;
	font-size: 22rpx;
	border-radius: 24rpx;
	padding: 24rpx 36rpx;
	box-shadow: 0 4rpx 24rpx rgba(42,130,228,0.10);
	text-align: center;
	max-width: 70vw;
	min-width: 120rpx;
	min-height: 48rpx;
	font-weight: 500;
	letter-spacing: 1rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.linen-tip-check {
	font-size: 48rpx;
	color: #2A82E4;
	margin-bottom: 12rpx;
	display: block;
	line-height: 1;
}
</style> 
